<template>
  <div class="tabs">
    <router-link class="tab cur"
                 :to="item.url" v-for="(item,index) in list"
                 :key="index">
      <span>{{ item.name }}</span>
    </router-link>
  </div>
</template>
<script>

export default {
  name: "tabs",
  components: {},
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    },
    active: {
      type: [Number, String],
      default() {
        return 0;
      }
    },
  },
  data() {
    return {
      bgActive: ''
    }
  },
  watch: {},
  mounted() {
  },
  methods: {
    getactive(e) {
      this.$emit('update:active', e)
    },
  }
}
</script>
<style scoped lang="scss">
.tabs {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  outline: none !important;

  .tab {
    background: url("./assets/tabbg.png") center center no-repeat;
    background-size: 154px 58px;
    width: 154px;
    height: 76px;
    opacity: 1;
    display: flex;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    margin-right: 10px;
    position: relative;

    span {
      font-size: 16px;
      font-family: MiSans-Bold;
      font-weight: 600;
      color: #F5F1FF;
      background: linear-gradient(180deg, #EAEDFF 0%, #80BEDB 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .tab.active, .tab:hover, .tab.router-link-exact-active {
    background: url("./assets/tabActivebg.png") center center no-repeat;
    background-size: 154px 76px;
    width: 154px;
    height: 76px;

    span {
      font-size: 16px;
      font-family: MiSans-Bold;
      font-weight: 600;
      color: #F5F1FF;
      background: linear-gradient(180deg, #EAEDFF 0%, #14B3FD 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
</style>
